<template>
  <div class="app-container">
    <div class="formDiv">
      <el-form ref="form" :inline="true" label-width="140px">
        <el-row>
          <el-col :span="6">
            <el-form-item label="医院名称">
              <el-select
                clearable
                @clear="abc('hospitalId')"
                filterable
                v-model="params.hospitalId"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in officeOption"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="地区">
              <el-cascader v-model="selectedOptions" clearable :options="options" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="结算模式">
              <el-select
                clearable
                filterable
                @clear="abc('sumModel')"
                v-model="params.sumModel"
                placeholder="请选择"
              >
                <el-option label="全部" :value="null"></el-option>
                <el-option label="预存款模式" :value="1"></el-option>
                <el-option label="回款模式" :value="0"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-button style="margin-left:60px" type="primary" @click="searchFn">查询</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="listDiv">
      <el-table :data="tableData" class="tableData" style="width: 100%">
        <el-table-column
          type="index"
          label="序号"
          fixed="left"
          align="center"
          :index="table_index"
          width="50"
        ></el-table-column>
        <el-table-column prop="hospitalName" label="医院名称" align="center" />
        <el-table-column prop="region" label="地区" align="center" />
        <el-table-column prop="leader" label="业务联系人" align="center" />
        <el-table-column prop="phone" label="业务联系人手机" align="center">
          <template slot-scope="scope">
            <div>{{scope.row.phone | phonereg }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="sumModel" label="结算模式" align="center" />
        <el-table-column prop="leftAmount" label="账户余额" align="center" />
        <el-table-column prop="totalDeduct" label="账户累计扣款" align="center" />
        <el-table-column prop="credit" label="信用额度" align="center" />
        <el-table-column prop="leftCredit" label="当前剩余信用额度" align="center" />
        <el-table-column prop="oweAmount" label="欠款金额" align="center" />
        <el-table-column prop="lastRechargeTime" label="最近一次充值时间" align="center" />
        <el-table-column prop="createdTime" label="医院入驻时间" align="center" />
      </el-table>
    </div>
    <div class="pagesCon">
      <div>
        <el-pagination
          :current-page="params.pageNum"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="params.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { hospitalDropDown } from "@/api/doctorManage";
import { listHospitalAccount } from "@/api/money";
export default {
  name: "",
  data() {
    return {
      total: 0,
      tableData: [],
      options: [],
      selectedOptions: [],
      officeOption: [],
      params: { pageNum: 1, pageSize: 10 }
    };
  },
  created() {
    var addData = require("../../../static/address/area.json");
    this.options = addData;
    this.hlist();
    this.list();
  },
  methods: {
    //清空
    abc(val) {
      if (!this.params[val]) this.params[val] = null;
      console.log(val, this.params[val]);
    },
    searchFn() {
      this.params.city = this.selectedOptions.length
        ? this.selectedOptions[0]
        : null;
      this.params.province = this.selectedOptions.length
        ? this.selectedOptions[1]
        : null;
      this.params.pageNum = 1;
      this.list();
    },
    async list() {
      let res = await listHospitalAccount(this.params);
      if (res.data.code == 0) {
        this.tableData = res.data.data.list;
        this.total = res.data.data.count;
      }
    },
    hlist() {
      hospitalDropDown().then(res => {
        let resData = res.data.data;
        let newData = [];
        resData.forEach(e => {
          newData.push({
            value: e.id + "",
            label: e.name
          });
        });
        newData.unshift({
          value: "",
          label: "全部"
        });
        this.officeOption = newData;
        // console.log(this.officeOption)
      });
    },
    handleSizeChange(val) {
      this.params.pageNum = 1;
      this.params.pageSize = val;
      this.list();
    },
    handleCurrentChange(val) {
      this.params.pageNum = val;
      this.list();
    },
    table_index(index) {
      return (this.params.pageNum - 1) * this.params.pageSize + index + 1;
    }
  }
};
</script>
